<template>
  <el-col id="goodsIndex">
    <el-row>
      <el-col :span="8">
        <div style="border :1px solid #DCDFE6; width: 350px;height: 400px">
          <el-image :src="checkedImgUrl" style="width: 400px;height: 400px" :previewSrcList="previewSrcList"></el-image>
        </div>
        <ul style="width: 400px">
          <li v-for="(item,index) in imgUl" :key="index" class="img_li" :class="{img_li_checked:item.checked}"
              @click="checkImg(index)">
            <div>
              <el-image :src="item.url" style="width: 37px; height: 35px"></el-image>
            </div>
          </li>
        </ul>
      </el-col>
      <el-col :span="16">
        <div class="header">
          <span style="font-weight: bolder;font-size: 1.4em">{{ goodsDetail.name }}</span>
        </div>
        <el-col class="main">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="价格:">
              <div v-if="goodsDetail.discount!=0">
                <span style="color: #F56C6C;font-size: 2em">￥{{ goodsDetail.discount }}&nbsp;&nbsp;&nbsp;</span><el-divider direction="vertical"></el-divider><del style="color: #909399">￥{{ goodsDetail.price }}</del></div>
              <div v-if="goodsDetail.discount==0"><span>${{ goodsDetail.price }}</span></div>
            </el-form-item>
            <el-form-item label="优惠券:">
              <el-tag type="danger" v-for="(item,index) in goodsDetail.couponList" :key="index">{{ item }}</el-tag>
            </el-form-item>
            <el-form-item label="重量:">
              <div><span>{{ goodsDetail.wight }}kg</span></div>
            </el-form-item>
            <el-form-item label="选择颜色:">
              <li v-for="(item,index) in goodsDetail.colorList" :key="index" class="img_li"
                  :class="{img_li_checked:item.checked}" @click="checkColor(index)">
                <el-row style="height: 30px;width: 70px" >
                  <el-col :span="14" class="fl">
                    <el-image :src="item.imgUrlList[0]" style="width: 36px; height: 40px"></el-image>
                  </el-col>
                  <el-col :span="10" class="fl">
                    <span style="padding-top: 20px">{{ item.color }}</span>
                  </el-col>
                </el-row>
              </li>
            </el-form-item>
            <el-form-item label="内存:">

              <el-tag @click="checkRAM(index)" v-for="(item,index) in goodsDetail.RAMList" :key="index"
                      type="info" :effect="item.checked?'dark':'plain'">
                {{ item.name }}
              </el-tag>

            </el-form-item>
            <el-form-item label="版本:">
              <el-tag @click="checkType(index)" v-for="(item,index) in goodsDetail.typeList" :key="index"
                      type="primary" :effect="item.checked?'dark':'plain'">
                {{ item.name }}
              </el-tag>
            </el-form-item>
            <el-form-item label="套餐:">
              <el-tag @click="checkSet(index)" v-for="(item,index) in goodsDetail.setList" :key="index"
                      type="success" :effect="item.checked?'dark':'plain'">
                {{ item.name }}
              </el-tag>
            </el-form-item>
            <el-form-item label="服务:">
              <el-tag @click="checkService(index)" v-for="(item,index) in goodsDetail.serviceList" :key="index"
                      type="warning" :effect="item.checked?'dark':'plain'">
                {{ item.name }}
              </el-tag>
            </el-form-item>
            <el-divider></el-divider>
            <el-form-item>
              <el-input-number style="width: 80px" v-model="count" controls-position="right" :min="1"></el-input-number>
              <el-button type="danger" @click="addShopCart">加入购物车</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="navigate"
             background-color="#F2F6FC" text-color="#606266" active-text-color="#F56C6C" style="font-size: 2.2em">
      <el-menu-item index="1">商品详情</el-menu-item>
      <el-menu-item index="2">规格包装</el-menu-item>
      <el-menu-item index="3">服务保障</el-menu-item>
      <el-menu-item index="4">商品评价</el-menu-item>
    </el-menu>
    <router-view/>
  </el-col>
</template>

<script>
export default {
  name: "goodsIndex",
  props: ["id"],
  components: {},
  data() {
    return {
      activeIndex: this.$route.meta.activeIndex,
      goodsDetail: {},
      imgUl:[],
      count:1,
    }
  },
  computed: {
    checkedImgUrl(){
      let checkedImgUrl=""
      this.imgUl.forEach((item)=>{
        if(item.checked) checkedImgUrl=item.url
      })
      return checkedImgUrl
    },
    previewSrcList() {
      let previewSrcList = []
      this.goodsDetail.colorList.forEach((item) => {
        if (item.checked) previewSrcList = item.imgUrlList
      })
      return previewSrcList
    },
    form(){
      let form={color:'',RAM:'',type:'',set:'',service:'',count:0}
      this.goodsDetail.colorList.forEach((item)=>{
        if(item.checked) form.color=item.color
      })
      this.goodsDetail.RAMList.forEach((item)=>{
        if(item.checked) form.RAM=item.name
      })
      this.goodsDetail.typeList.forEach((item)=>{
        if(item.checked) form.type=item.name
      })
      this.goodsDetail.setList.forEach((item)=>{
        if(item.checked) form.set=item.name
      })
      this.goodsDetail.serviceList.forEach((item)=>{
        if(item.checked) form.service=item.name
      })
      form.count=this.count
      return form
    }
  },
  methods: {
    toDetail() {
      this.$router.push({path: "/goods/:id/detail"})
    },
    toSpec() {
      this.$router.push({path: "/goods/:id/spec"})
    },
    toService() {
      this.$router.push({path: "/goods/:id/service"})
    },
    toComments() {
      this.$router.push({path: "/goods/:id/comments"})
    },
    checkImg(index) {
      this.imgUl.forEach((item) => {
        item.checked = false
      })
      this.imgUl.forEach((item, index1) => {
        if (index == index1) {
          item.checked = true
        }
      })
    },
    checkColor(index) {
      this.goodsDetail.colorList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.colorList.forEach((item, index1) => {
        if (index == index1) {
          item.checked = true
          let showImgUrlList=[]
          for(let i=0;i<item.imgUrlList.length;i++){
            let img={url:"",checked:false}
            img.url=item.imgUrlList[i]
            i===0?img.checked=true:img.checked=false
            showImgUrlList.push(img)
          }
          this.imgUl=showImgUrlList
        }
      })
    },
    checkType(index) {
      this.goodsDetail.typeList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.typeList.forEach((item, index1) => {
        if (index == index1) {
          item.checked = true
        }
      })
    },
    checkSet(index) {
      this.goodsDetail.setList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.setList.forEach((item, index1) => {
        if (index == index1) {
          item.checked = true
        }
      })
    },
    checkService(index) {
      this.goodsDetail.serviceList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.serviceList.forEach((item, index1) => {
        if (index == index1) {
          item.checked = true
        }
      })
    },
    checkRAM(index) {
      this.goodsDetail.RAMList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.RAMList.forEach((item, index1) => {
        if (index == index1) {
          item.checked = true
        }
      })
    },
    checkTestImg(index) {
      this.imgUl.forEach((item) => {
        item.checked = false
      })
      this.imgUl.forEach((item, index1) => {
        if (index == index1) {
          item.checked = true
        }
      })
    },
    addShopCart(){

    },
    navigate(key){
      switch (key){
        case "1":
          this.$router.push({path:'/goods/'+this.id+'/detail'})
          break
        case "2":
          this.$router.push({path:'/goods/'+this.id+'/spec'})
          break
        case "3":
          this.$router.push({path:'/goods/'+this.id+'/service'})
          break
        case "4":
          this.$router.push({path:'/goods/'+this.id+'/comments'})
          break
        default:
          console.log("无效选择")
          break
      }
    }
  },
  //created在dom节点加载前执行，mounted在之后
  created() {
    this.axios.get(
        '/api/index'
    ).then((res)=>{
      let goodsDetail=res.data.goodsDetail
      for (let i = 0; i < goodsDetail.colorList.length; i++) {
        i == 0 ? goodsDetail.colorList[i] = Object.assign(goodsDetail.colorList[i], {checked: true})
            : goodsDetail.colorList[i] = Object.assign(goodsDetail.colorList[i], {checked: false})
      }
      for (let i = 0; i < goodsDetail.RAMList.length; i++) {
        i == 0 ? goodsDetail.RAMList[i] = Object.assign(goodsDetail.RAMList[i], {checked: true})
            : goodsDetail.RAMList[i] = Object.assign(goodsDetail.RAMList[i], {checked: false})
      }
      for (let i = 0; i < goodsDetail.typeList.length; i++) {
        i == 0 ? goodsDetail.typeList[i] = Object.assign(goodsDetail.typeList[i], {checked: true})
            : goodsDetail.typeList[i] = Object.assign(goodsDetail.typeList[i], {checked: false})
      }
      // eslint-disable-next-line no-unused-vars
      goodsDetail.setList.forEach((item)=>{
        item=Object.assign(item,{checked:false})
      })
      // eslint-disable-next-line no-unused-vars
      goodsDetail.serviceList.forEach((item)=>{
        item=Object.assign(item,{checked:false})
      })
      this.goodsDetail = goodsDetail
      this.checkColor(0)
    }).catch((err)=>{
      this.$message.error(err)
    })

  },
}
</script>

<style scoped>
.img_li {
  list-style-type: none;
  float: left;
  padding: 5px;
}

.img_li_not_checked {
  border: 2px solid #ffffff;
}

.img_li_checked {
  border: 2px solid #F56C6C;
}
</style>
